import React, { useEffect } from 'react';
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
import { ThemeProvider, createTheme, CssBaseline } from '@mui/material';
import { useSelector, useDispatch } from 'react-redux';
import { loadUser } from './redux/slices/authSlice';
import { RootState } from './redux/store';
import { AppDispatch } from './redux/store';

// Components
import Navbar from './components/layout/Navbar';
import Footer from './components/layout/Footer';
import PrivateRoute from './components/routing/PrivateRoute';
import Alert from './components/layout/Alert';
import I18nTester from './components/I18nTester';

// Pages
import Home from './pages/Home';
import Login from './pages/Login';
import Register from './pages/Register';
import Dashboard from './pages/Dashboard';
import PatternDetails from './pages/PatternDetails';
import Challenge from './pages/Challenge';
import Profile from './pages/Profile';
import Settings from './pages/Settings';
import NotFound from './pages/NotFound';
import Patterns from './pages/Patterns';

const App: React.FC = () => {
  const dispatch = useDispatch<AppDispatch>();
  const { theme } = useSelector((state: RootState) => state.ui);
  
  useEffect(() => {
    dispatch(loadUser());
  }, [dispatch]);
  
  const appTheme = createTheme({
    palette: {
      mode: theme as 'light' | 'dark',
      primary: {
        main: '#3f51b5',
      },
      secondary: {
        main: '#f50057',
      },
    },
  });
  
  return (
    <ThemeProvider theme={appTheme}>
      <CssBaseline />
      <Router>
        <Navbar />
        <Alert />
        <main className="container">
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/login" element={<Login />} />
            <Route path="/register" element={<Register />} />
            <Route
              path="/dashboard"
              element={
                <PrivateRoute>
                  <Dashboard />
                </PrivateRoute>
              }
            />
            <Route
              path="/patterns"
              element={
                <PrivateRoute>
                  <Patterns />
                </PrivateRoute>
              }
            />
            <Route
              path="/patterns/:patternId"
              element={
                <PrivateRoute>
                  <PatternDetails />
                </PrivateRoute>
              }
            />
            <Route
              path="/challenges/:challengeId"
              element={
                <PrivateRoute>
                  <Challenge />
                </PrivateRoute>
              }
            />
            <Route
              path="/profile"
              element={
                <PrivateRoute>
                  <Profile />
                </PrivateRoute>
              }
            />
            <Route
              path="/settings"
              element={
                <PrivateRoute>
                  <Settings />
                </PrivateRoute>
              }
            />
            {/* 测试路由 */}
            <Route path="/i18n-test" element={<I18nTester />} />
            <Route path="/not-found" element={<NotFound />} />
            <Route path="*" element={<Navigate to="/not-found" replace />} />
          </Routes>
        </main>
        <Footer />
      </Router>
    </ThemeProvider>
  );
};

export default App; 